<script>
	import Vue from 'vue';
	export default{
		data(){
			return {
//				goodsmsList:this.$store.state.data.data
//				catTT : this.$store.state.data.img,
				num:1
			}
			
		},
		methods:{
				fn(){
//					console.log(this.catTT);
					
				},
				request(num){
					this.$http({
						url:'http://m.zhai.me/super/api/v3/item/subItems',
						params:{
							itemId:num
						},
						method:'get',
					})
					.then(function(req){
						//this.goodsmsList = req.data.resultList;
						//this.goodsmsList = this.$store.state.data.data;
						
					})
	
				},
				jian(){
					if(this.num>1){
						this.num--;
						if(this.num<=1){
							this.num=1
						}
					}
				},
				jia(){
					this.num++;
				},
				data(){
					return this.$store.state.data.img
				},
				addAllorder(a){
					{
						num:this.num;
						order:a[0]
					};
					this.$store.commit('addState',{
						num:this.num,
						order:a[0]
						
					})
				}
		},
		mounted(){
			this.request();
		}
	}
	
	Vue.filter('currencys',function(value){
		if(!value) {return ''}
		value = value.toString()
		return "￥" + currencys + '.00'
	})
</script>


<template>
	<div class="container">
		<!--返回、购物车-->
		<div class="goback">
			<router-link to="supers">
				<i class="fa fa-angle-left" aria-hidden="true"></i>
			</router-link>
			<router-link to="cart">
				<i class="fa fa-shopping-cart" aria-hidden="true"></i>
			</router-link>
		</div>
			
	<div class="container">
		
		<!--轮播图-->
			<mt-swipe :auto="4000">
	  		<mt-swipe-item  v-for=" k in data()">
	  			<div class="banner">
	  				<img :src="k.pictureUrl"/>
	  			</div>
	  		</mt-swipe-item>
	  		<!--<mt-swipe-item>
	  			<div class="banner">
	  				<img src="../../assets/images/superpic3.jpg"/>
	  			</div>
	  		</mt-swipe-item>
	  		<mt-swipe-item>
  				<div class="banner">
  					<img src="../../assets/images/superpic4.jpg"/>
  				</div>
	  		</mt-swipe-item>-->
			</mt-swipe>
			
		<!--价格、销量-->
		<div class="price">
			<div class="price_1">
				<span class="price_c1">{{this.$store.state.data.data.price | aaa}}</span>
				<div>
					<span>原价 : </span>
					<span>{{this.$store.state.data.data.originPrice}}</span>
				</div>
			</div>
			<div class="price_2">
				<div>
					<span>库存 : </span>
					<span>{{this.$store.state.data.data.stock}}</span>
				</div>
				<div>
					<span>销量 : </span>
					<span>{{this.$store.state.data.data.sales}}</span>
				</div>
				<div>
					<span>已点赞</span>
					<i class="fa fa-heart-o" aria-hidden="true"></i>
					<span>{{this.$store.state.data.data.likesNum}}</span>
				</div>
			</div>
			<div class="price_3">
				<div>
					<span @click="fn">支持分期</span>
					<span>正品保障</span>
					<span>无忧售后</span>
				</div>
				<span><img src="../../assets/images/p_11.png"/></span>
			</div>
		</div>
		<!--配送信息-->
		<div class="express">
			<div>上海 配送至 全国</div>
			<div>快递￥0.00(包邮)</div>
		</div>
		<!--数量-->
		<div class="num">
			<div class="num_1">
				选择数量
			</div>
			<div class="num_2">
				<span @click='jian'>－</span>
				<span>{{num}}</span>
				<span @click='jia'>＋</span>
			</div>
		</div>
		<!--null功能1-->
		<div class="null_1">
	</div>
	
		</div>
		<!--立即购买-->
		<div class="buy">
			<div>
				立即购买
			</div>
			<div @click="addAllorder(data())">
				加入购物车
			</div>
		</div>
	</div>
</template>


<style scoped>
	.container{
		box-sizing:border-box;
		background:#f4f4f4;
	}
	.goback{
		height:1.189189rem;
		background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
		display:flex;
		justify-content: space-between;
		align-items:center;
		padding:0 0.27027rem;
		position: absolute;
		top:0;
		left:0;
		right:0;
		z-index:99;
	}
	.goback i:first-child{
		font-size:0.566486rem;
		color:#fff;
	}
	.goback i:nth-child(2){
		font-size:0.5486rem;
		color:#fff;
		position: relative;
		right:0.27027rem;
	}
	
	/*主体*/
	.container{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0.93rem;
		overflow:auto;	
	}
	.mint-swipe{
		height:45%;
	}
	.banner img{
		width:100%;
	}
	
	.price{
		width:100%;
		display: flex;
		flex-direction:column;
		align-items:center;
		height:3.47027rem;
		box-shadow: 0 4px 5px rgba(0,0,0,0.1);
		margin-bottom:10px;
		margin-top:-18px;
	}
	.price_1,
	.price_2,
	.price_3
	{
		width:100%;
		display: flex;
		align-items:center;
		justify-content: space-around;
	}
	.price_c1{
		color:#fc2c60;
		font-size:0.486486rem;
		font-weight:bold;
		position: relative;
		right:0.74054rem;
	}
	.price_1 div{
		position: relative;
		left:0.81081rem;
		text-decoration:line-through;
	}
	.price_1 div span{
		color:#999;
		font-size:0.378378rem;
		font-weight:bold;
	}
	.price_1{
		height:1.381081rem;
		position: relative;
		top:0.27027rem;
		background:#fff;
	}
	.price_2{
		height:1.108108rem;
		color:#a6a5a3;
		font-size:0.324324rem;
		background:#fff;
	}
	.price_2 div:nth-of-type(3) span:first-child{
		display: inline-block;
		width:1.324324rem;
		height:0.459459rem;
		line-height:0.459459rem;
		text-align: center;
		background:url(../../assets/images/superui4.png) no-repeat;
		background-size:1550%;
		font-size: 0.324324rem;
		color:#ff0057;
		position: relative;
		left:0.081081rem;
	}
	.price_2 div:nth-of-type(3) i{
		font-size:0.378378rem;
	}
	.price_3{
		height:1.081081rem;
		background:#f8f8f8;
	}
	.price_3 div{
		padding-right:1.27rem;
	}
	.price_3 div span{
		display:inline-block;
		width:1.729729rem;
		height:0.54054rem;
		line-height:0.54054rem;
		font-size:0.324324rem;
		color:#fff;
		border-radius:0.27027rem;
		text-align: center;
	}
	.price_3 div span:first-child{
		background:#fc2b64;
	}
	.price_3 div span:nth-child(2){
		background:#f8a724;
	}
	.price_3 div span:nth-child(3){
		background:#4abdea;
	}
	.price_3 span img{
		height:0.45405rem;
	}
	/*配送信息*/
	.express{
		height:1.027027rem;
		line-height:1.027027rem;
		display: flex;
		text-align: center;
		justify-content: space-between;
		padding:0 0.54054rem;
		background: #fff;
		color:#a8a3a7;
		font-size: 0.324324rem;
		margin-top:0.216216rem;
	}
	/*数量*/
	.num{
		height:1.135135rem;
		background:#fff;
		display: flex;
		justify-content:space-between;
		align-items:center;
		padding: 0 0.54054rem;
		font-size:0.371351rem;
		color:#585a59;
		margin-top:0.324324rem;
	}
	.num_2{
		display: flex;
	}
	.num_2 span{
		margin: 0 0.054054rem;
	}
	.num_2 span:first-child{
		width:0.594594rem;
		height:0.594594rem;
		line-height:0.594594rem;
		display: inline-block;
		background:#d8d8d8;
		font-size:0.65rem;
		color:#fff;
		text-align: center;
		border-radius:0.081081rem;
		/*background:url(../../assets/images/superui5.png) -2132px 0 ;*/
	}
	.num_2 span:nth-child(2){
		width:0.54594rem;
		height:0.54594rem;
		line-height:0.594594rem;
		display: inline-block;
		border:0.027027rem solid #d8d8d8;
		border-radius:0.081081rem;
		text-align: center;
	}
	.num_2 span:nth-child(3){
		width:0.594594rem;
		height:0.594594rem;
		line-height:0.594594rem;
		display: inline-block;
		background:#fe0056;
		color:#fff;
		text-align: center;
		font-size:0.5324rem;
		border-radius:0.081081rem;
	}
	.null_1{
		height:0.594594rem;
		background:#fff;
		border-top:0.027027rem solid #fcfcfc;
	}
	/*购买*/
	.buy{
		display: flex;
		text-align: center;
		height:1.1rem;
		line-height:1.1rem;
		color:#fff;
		font-size: 0.378378rem;
		position: fixed;
		bottom:0;
		left:0;
		right:0;
	}
	.buy div:first-child{
		width:50%;
		background:#fc2b64;
	}
	.buy div:nth-child(2){
		width:50%;
		background:#ffcc25;
	}
	
</style>